import 'package:flutter/material.dart';

// 自定义渐变按钮组件
class GradientButton extends StatelessWidget {
  final String text;
  final VoidCallback? onPressed;
  final bool enabled;

  const GradientButton({
    super.key,
    required this.text,
    this.onPressed,
    this.enabled = true,
  });

  @override
  Widget build(BuildContext context) {
    return Opacity(
      opacity: enabled ? 1.0 : 0.5,
      child: DecoratedBox(
        decoration: BoxDecoration(
          gradient: const LinearGradient(
            colors: [Color(0xFFFB7BA2), Color(0xFFFCE043)],
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
          ),
          borderRadius: BorderRadius.circular(24),
          boxShadow: [
            BoxShadow(
              color: Colors.orange.withOpacity(0.3),
              offset: const Offset(0, 6),
              blurRadius: 16,
            ),
          ],
        ),
        child: Material(
          color: Colors.transparent,
          borderRadius: BorderRadius.circular(24),
          child: InkWell(
            borderRadius: BorderRadius.circular(24),
            onTap: enabled ? onPressed : null,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 60, vertical: 18),
              child: Center(
                child: Text(
                  text,
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    letterSpacing: 2,
                    fontWeight: FontWeight.bold,
                    shadows: [
                      Shadow(
                        color: Colors.black26,
                        offset: Offset(1, 1),
                        blurRadius: 2,
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

// 新页面：知识点说明和示例
class DecoratedBoxDemoPage extends StatelessWidget {
  const DecoratedBoxDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DecoratedBox & BoxDecoration 知识点'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(24.0),
        child: ListView(
          children: [
            const Text(
              'DecoratedBox & BoxDecoration 详解',
              style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),
            const Text(
              '1. DecoratedBox 可以在其子组件前后绘制装饰（如背景、边框、阴影、渐变等）。\n'
              '2. BoxDecoration 是最常用的装饰类，支持颜色、渐变、圆角、阴影、边框等。\n'
              '3. position 属性可控制装饰绘制在子组件前（前景）还是后（背景），默认为背景。\n'
              '4. 通常配合 Material 和 InkWell 使用，实现美观且有水波纹反馈的按钮。',
              style: TextStyle(fontSize: 16),
            ),
            const SizedBox(height: 32),
            const Text(
              '示例：带渐变、圆角、阴影和水波纹的按钮',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),
            Center(
              child: GradientButton(
                text: "装饰按钮",
                onPressed: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('你点击了装饰按钮！')),
                  );
                },
              ),
            ),
            const SizedBox(height: 32),
            const Text(
              '代码示例：',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            Container(
              padding: const EdgeInsets.all(12),
              color: Colors.grey[200],
              child: const SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Text(
                  '''
DecoratedBox( // 用于给子组件添加装饰效果（如背景、圆角、阴影等）
  decoration: BoxDecoration( // 定义装饰样式
    gradient: LinearGradient( // 设置线性渐变背景
      colors: [Colors.red, Colors.orange], // 渐变色从红到橙
    ),
    borderRadius: BorderRadius.circular(8.0), // 设置圆角半径为8
    boxShadow: [
      BoxShadow(
        color: Colors.black54, // 阴影颜色为半透明黑色
        offset: Offset(2.0, 2.0), // 阴影向右下偏移2像素
        blurRadius: 4.0, // 阴影模糊半径为4
      ),
    ],
  ),
  child: Padding( // 给子组件添加内边距
    padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0), // 左右80，上下18的内边距
    child: Text(
      "Login", // 显示的文本内容
      style: TextStyle(color: Colors.white), // 文字颜色为白色
    ),
  ),
)
                  ''',
                  style: TextStyle(fontFamily: 'monospace', fontSize: 13),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 主入口和主页面
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 40),
            // 点击跳转到知识点演示页面
            GradientButton(
              text: "Login",
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (_) => const DecoratedBoxDemoPage(),
                  ),
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}
